<template>
  <div>
    <basic-container-one>
      <vue-element-loading :active="isActive" spinner="bar-fade-scale" color="#409eff" background-color="rgba(255,255,255,0.2)"/>
      <el-form :inline="true" :model="formInline" >
        <div style="margin-top: 22px">
          <!--<el-form-item>
            <el-input clearable v-model="formInline.gameName" placeholder="游戏名称"/>
          </el-form-item>-->
          <el-form-item>
            <el-select v-model="formInline.gameName" filterable clearable placeholder="游戏名称">
              <el-option
                v-for="item in gamelist"
                :key="item.gameName"
                :label="item.gameName"
                :value="item.gameName"/>
            </el-select>
          </el-form-item>


          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="queryFunc">查询</el-button>
            <el-button type="primary" @click="addGame">新增归类</el-button>
          </el-form-item>
        </div>
      </el-form>
    </basic-container-one>
    <basic-container>
      <div style="margin-top: 20px">
        <el-table
          :data="dailyStatisticsList"
          stripe
          ref="el-table"
          style="width: 100%">
          <el-table-column
            prop="id"
            label="编号"
            min-width="10%">
          </el-table-column>
          <el-table-column
            prop="gameName"
            label="游戏大类目名称"
            min-width="20%">
          </el-table-column>
          <el-table-column
            prop="games"
            label="关联游戏"
            min-width="60%">
            <template slot-scope="scope">
              <div v-html="changeLine(scope.row.games)"></div>
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="10%">
            <template slot-scope="scope">
              <el-button @click="editGame(scope.row)"  type="text" size="medium">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="block" style="margin-top: 20px;">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.current"
          :page-sizes="[10, 20, 50, 100, 200]"
          :page-size="page.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total">
        </el-pagination>
      </div>

    </basic-container>

    <el-dialog :title="mode" :visible.sync="dialogEditFormVisible" @close="closeEditDialog()" :close-on-click-modal="false" customClass="customView1">
      <div v-if="dialogEditFormVisible">
        <el-form :model="editForm" :rules="rules" label-width="130px" class="demo-ruleForm" ref="ruleForm">
          <el-form-item label="游戏归类名称：" prop="gameName">
            <el-input v-model="editForm.gameName" clearable placeholder="请输入游戏归类名称" maxlength='100' style="width:350px"></el-input>
          </el-form-item>
          <el-form-item label="关联游戏：">
            <el-select style="width: 100%" v-model="editForm.gamesList" filterable clearable placeholder="关联游戏" multiple>
              <el-option
                v-for="item in gamelist"
                :key="item.gameName"
                :label="item.gameName"
                :value="item.gameName"/>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeEditDialog()">取 消</el-button>
        <el-button type="primary" @click="saveEditGame()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {mapGetters} from "vuex";

import {saveSpendQrGames, queryGamesQr, queryPageSpendQrGames} from "@/api/system/details";
import moment from "moment";
import {cloneObj} from '@/util/util'
import VueElementLoading from 'vue-element-loading'

export default {
  name: "day",
  data() {
    return {
      isActive: false,
      dialogEditFormVisible:false,
      gamelist:[],
      formInline: {
        gameName: '',
      },
      page: {
        current: 1,
        size: 10,
        total: 0,
      },
      dailyStatisticsList: [],
      checked: false,
      isshowtrue: false,
      ischange: true,
      editForm:{
        id:'',
        gameName:'',
        gamesList:''
      },
      rules: {
        gameName:[
          {required: true, message: '请输入游戏归类名称', trigger: 'blur'}
        ],
      }
    }

  },
  components: {
    VueElementLoading
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  mounted() {
    this.loadGames()
    this.getPageSpendQrGames()
  },


  methods: {
    changeLine(str){
      return str.replaceAll(',','&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;')
    },
    saveEditGame(){
      saveSpendQrGames(this.editForm).then(res => {
        if (res.data.success) {
          this.$message({
            type: "success",
            message: "更新成功!"
          });
          this.closeEditDialog()
          this.refreshTable();
        } else {
          this.$message({
            type: "error",
            message: res.data.msg
          });
        }
      });
    },
    editGame(row){
      this.dialogEditFormVisible = true
      this.mode = '编辑游戏归类';
      this.editForm.gamesList = row.games.split(",")
      this.editForm.id = row.id
      this.editForm.gameName = row.gameName
    },
    addGame(){
      this.dialogEditFormVisible = true
      this.mode = '新增游戏归类';
    },
    closeEditDialog(){
      this.dialogEditFormVisible = false
      this.editForm = {
        id:'',
        gameName:'',
        gamesList:''
      }
    },
    loadGames() {
      queryGamesQr().then(res => {
        this.gamelist = res.data.data
      })
    },

    /**
     * 搜索按钮
     */
    queryFunc() {
      this.refreshTable()
    },

    refreshTable() {
      this.isActive = true
      this.getPageSpendQrGames()
    },

    getPageSpendQrGames() {
      let formData = cloneObj(this.formInline);
      queryPageSpendQrGames(formData, this.page.current, this.page.size).then(res => {
        this.isActive = false
        let data = res.data.data
        this.dailyStatisticsList = data.records
        this.page.total = data.total
      })
    },
    handleSizeChange(val) {
      this.page.size = val
      this.refreshTable()
    },
    handleCurrentChange(val) {
      this.page.current = val
      this.refreshTable()
    },

  }
}
</script>

<style lang="scss">
.customView1{
  width: 40%;
  background-color: #FFFFFF !important;
}
</style>
